@charset "UTF-8";

/**
 * @copyright     2022 beikeshop.com - All Rights Reserved.
 * @link          https://beikeshop.com
 * @Author        pu shuo <pushuo@guangda.work>
 * @Date          2022-09-03 22:32:29
 * @LastEditTime  2022-09-16 20:56:27
 */

.product-wrap {
  margin-bottom: 26px;
  text-align: center;



  .image {
    margin-bottom: 10px;
    position: relative;

    .image-old {
      opacity: 1;
      transition: all ease-out .4s;
    }

    .image-hover {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }

    .button-wrap {
      width: 100%;
      position: absolute;
      z-index: 40;
      bottom: -30px;
      opacity: 0;
      transition: all .3s ease-out;
      display: flex;
      justify-content: center;

      button {
        &:hover {
          background-color: rgb(70, 70, 70);
        }
      }
    }

    &:hover {
      .image-hover {
        opacity: 1;
        transition: all ease-out .4s;
      }

      .image-old {
        opacity: 0;
      }
    }
  }

  &:hover {
    .button-wrap {
      bottom: 10px;
      opacity: 1;
    }
  }

  .product-name {
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .product-price {
    .price-new {
      color: $primary;
      font-weight: bold;
    }

    .price-lod {
      color: #aaa;
      margin-left: 4px;
      text-decoration: line-through;
    }
  }
}
